<template>
  <a-layout class="master-layout">
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
      width="300"
      :collapsedWidth="0"
    >
      <div class="logo">资源管理系统</div>
      <a-menu
        :default-selected-keys="defaultSelectedKeys"
        :default-open-keys="['sub1']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
        @select="onMenuSelect"
      >
        <a-menu-item
          key="1"
          v-if="$store.state.userData.roleName == 'educator'"
        >
          <a-icon type="pie-chart" />
          <span>资源管理</span>
        </a-menu-item>
        <!-- <a-menu-item key="2">
          <a-icon type="desktop" />
          <span>数字化资源管理功能拓展</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="inbox" />
          <span>数字化模型库</span>
        </a-menu-item> -->
        <a-sub-menu key="sub1">
          <span slot="title"
            ><a-icon type="setting" /><span>数字化资源管理功能拓展</span></span
          >
          <a-menu-item key="2"> 系统信息 </a-menu-item>
          <a-menu-item
            key="3"
            v-if="$store.state.userData.roleName == 'educator'"
          >
            数字化模型库
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <div>
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <a-button type="primary" @click="$router.push({ name: 'home' })"
            >返回</a-button
          >
        </div>
        <div
          class="backlogItpm"
          style="font-size: 30px"
          @click="onclickBacklogItpm"
        >
          关键声隐身装备教学与装备维护综合实验平台
        </div>
        <div class="user">
          <a-dropdown>
            <span class="user-center-wrapper ant-dropdown-link">
              <a-icon class="user-center-avatar" type="user" />
            </span>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item>
                <a>
                  <div class="user-center-wrapper-item">
                    <a-icon type="logout" />&nbsp;登出
                  </div>
                </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content>
        <!-- <router-view></router-view> -->
        <ResourceManage v-if="active == 'ResourceManage'" />
        <DigitalResource v-if="active == 'DigitalResource'" />
        <DigitalModelBase v-if="active == 'DigitalModelBase'" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import ResourceRouter from "@/pages/index/router/ResourceRouter";
import ResourceManage from "./ResourceManage.vue"; //资源管理
import DigitalResource from "./DigitalResource.vue"; //数字化资源管理功能拓展,即系统信息
import DigitalModelBase from "./DigitalModelBase.vue"; //数字化模型库
import "moment/locale/zh-cn";
export default {
  name: "app",
  components: {
    ResourceManage,
    DigitalResource,
    DigitalModelBase,
  },
  data() {
    return {
      defaultSelectedKeys: ["1"],
      name: this.$route.name,
      locale: zh_CN,
      collapsed: false,
      menuList: [], //表示菜单选项内容
      active: "ResourceManage", //默认为资源管理
    };
  },
  created() {
    this.getUser(); //获取用户信息
  },
  computed: {},
  methods: {
    async getUser() {
      const userData = JSON.parse(localStorage.getItem("userData"));
      if (userData) {
        this.$store.commit("setUserData", userData);
      }
      if (this.$store.state.userData.roleName == "educator") {
        this.defaultSelectedKeys = ["1"];
        this.active = "ResourceManage"; //默认为资源管理
      } else {
        this.defaultSelectedKeys = ["2"];
        this.active = "DigitalResource"; //默认为系统信息
      }
    },
    onMenuSelect({ key }) {
      switch (key) {
        case "1":
          this.active = "ResourceManage"; //资源管理
          break;
        case "2":
          this.active = "DigitalResource"; //数字化资源管理功能拓展
          break;
        case "3":
          this.active = "DigitalModelBase"; //数字化模型库
          break;
      }
    },
    routerClick(val) {
      console.log(this.active);

      this.active = val;
    },
    handleMenuClick(e) {
      this.$axios.get("/logout").then((res) => {
        if (res.code == 200) {
          message.success(res.data);
          localStorage.removeItem("token"); // 删除存储在 'token' 键下的数据
          this.$router.push({ name: "login" });
        }
      });
    },
    onclickBacklogItpm() {
      // this.$router.push({ name: "ItpmProjectManagement" });
    },
  },
};
</script>
<style lang="scss">
.ResourceManag {
  height: 100vh;
}
</style>
  